import React, { useRef, useEffect, useState } from 'react';
import { Layout, Menu, Avatar, Button } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import Set from '../components/set'; // 确保路径正确

const { Header } = Layout;

const MenuAvatar = ({ onHeight }) => {
  const headerRef = useRef(null);  // 创建一个ref

  useEffect(() => {
    if (headerRef.current) {
      onHeight(headerRef.current.clientHeight);  // 传递高度到父组件
    }
  }, [onHeight]);  // 确保当onHeight变化时重新运行

  const [open, setOpen] = useState(false);

  const showDrawer = () => {
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };

  return (
    <Layout>
      <Header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        {/* 公司图标 */}
        <div>
          <img src="./logo4.png" alt="logo" style={{ width: 180, marginBottom: -30}} />
        </div>

        {/* 用户中心按钮 */}
      {/*}  <Button type="link" onClick={showDrawer}>
          <Avatar icon={<UserOutlined />} />
  </Button>*/}

        {/* 抽屉组件 */}
        <Set open={open} onClose={onClose} />
      </Header>
    </Layout>
  );
};

export default MenuAvatar;


{/* <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
<Menu.Item key="avatar" icon={<Avatar icon={<UserOutlined />} />}>User</Menu.Item>
</Menu> */}
